<template>
<transition name="fade">
  <div class="rec-box">
    <header class="header recipe-header">
      <mt-header title="食谱">
        <router-link to="/silk" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </header>
    <div class="content">
      <!-- 轮播 -->
      <div class="rec-banner">
        <mt-swipe :auto="4000">
          <mt-swipe-item><img src="./../../assets/food1.jpg" alt=""></mt-swipe-item>
          <mt-swipe-item><img src="./../../assets/food2.jpg" alt=""></mt-swipe-item>
          <mt-swipe-item><img src="./../../assets/food4.jpg" alt=""></mt-swipe-item>
        </mt-swipe>
      </div>
      <!-- 导航 -->
      <div class="rec-nav">
        <div class="background"></div>
        <ul>
          <li @click="eat"><i class="iconfont icon-pingjia"></i><span>能不能吃</span></li>
          <li @click="book"><i class="iconfont icon-shuben"></i><span>营养食谱</span></li>
          <li @click="collection"><i class="iconfont icon-shoucang3"></i><span>我的收藏</span></li>
        </ul>
      </div>
       <!-- 列表 -->
      <div class="rec-list">
        <ul>
          <li @click="goDetail">
            <div class="li_cont">
              <img src="./../../assets/food3.jpg" alt="">
              <h3>清蒸鲟鱼</h3>
              <p>鲟鱼丰富的优质蛋白，提高宝宝免疫力</p>
              <span>适宜年龄: 8个月以上</span>
            </div>
          </li>
          <li @click="goDetail">
            <div class="li_cont">
              <img src="http://cp2.douguo.net/upload/caiku/a/5/3/yuan_a5399c98b6da93ea8b2d1d28cbcc34e3.jpeg" alt="">
              <h3>酒酿蛋花汤</h3>
              <p>酒酿，旧时叫“醴”，是中国传统的特产酒</p>
              <span>适宜年龄: 8个月以上</span>
            </div>
          </li>
          <li @click="goDetail">
            <div class="li_cont">
              <img src="./../../assets/food2.jpg" alt="">
              <h3>酒酿蛋花汤</h3>
              <p>酒酿，旧时叫“醴”，是中国传统的特产酒</p>
              <span>适宜年龄: 8个月以上</span>
            </div>
          </li>
          <li v-for="(item, index) in reclist" :key="index">
            <div class="li_cont">
              <img :src="item.img" alt="">
              <h3>{{item.suitable}}</h3>
              <p>{{item.effect}}</p>
              <span>{{item.lactation}}人在读</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
export default {
  data () {
    return {
      reclist: []
    }
  },
  created () {
    // http://10.8.162.9:8081/fod/selectFoodAll.do
    let data = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst'
    }
    axios({
      // headers: {
      //   'deviceCode': 'A95ZEF1-47B5-AC90BF3'
      // },
      method: 'post',
      url: 'http://10.8.162.9:8081/fod/selectFoodAll.do',
      data: Qs.stringify(data)
    })
      .then((res) => {
        console.log(res)
        const obj = res.data.list
        this.users = obj
        console.log(this.users)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    eat () {
      this.$router.push('/eat')
    },
    book () {
      this.$router.push('/book')
    },
    collection () {
      this.$router.push('/collection')
    },
    goDetail () {
      this.$router.push('/detail')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .recipe-header {
    @include rect(100%, 0.44rem);
    line-height: 0.20rem;
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
    .mint-header {
      background-color: rgba(249, 249, 249, 1);
      h1, .mint-header-button{
        color: rgb(85, 81, 81);
        font-size: 0.16rem;
        .mintui-back {
          font-weight: 900;
        }
      }
    }
  }
  .content {
    overflow: auto;
    .rec-banner {
      @include rect(100%, 2rem);
      line-height: 0.20rem;
      background-color: rgba(240, 240, 240, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      img {
      @include rect(100%, 100%);
      }
    }
    .rec-nav {
      position: relative;
      @include rect(100%, 1.4rem);
      line-height: 0.20rem;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      overflow: hidden;
      margin-top: -0.4rem;
      .background {
        @include rect(8rem, 6rem);
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: -2.16rem;
        background: #ffffff;
      }
      ul {
        position: absolute;
        top: 0;
        left: 0;
        @include rect(100%, 100%);
        @include flexbox();
        @include justify-content(space-around);
        @include align-items();
        z-index: 3;
        li {
          @include flexbox();
          @include flex-direction(column);
          @include justify-content();
          @include align-items();
          color: #815353;
          i {
            @include rect(0.52rem, 0.52rem);
            line-height: 0.49rem;
            background-color: rgba(247, 183, 156, 0.815);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0);
            border-radius: 50%;
          }
          .iconfont {
            font-size: 0.35rem;
          }
          .icon-pingjia {
            color: rgb(255, 255, 255);
          }
          .icon-shuben {
            font-size: 0.37rem;
            color: rgb(255, 255, 255);
          }
          .icon-shoucang3 {
            font-size: 0.38rem;
            color: rgb(255, 255, 255);
          }
          span {
            display: inline-block;
            padding-top: 0.1rem;
            color: rgb(122, 76, 76);
            font-size: 14px;
            text-align: left;
            font-family: PingFangSC-regular;
          }
        }
      }
    }
    .rec-list {
      @include rect(100%, auto);
      ul {
        @include rect(100%, auto);
        li {
          @include rect(3.47rem, 1.49rem);
          line-height: 0.17rem;
          border-radius: 0.12rem;
          background-color: rgb(248, 239, 232);
          color: rgb(141, 140, 140);
          font-size: 0.12rem;
          box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
          font-family: Arial;
          border: 1px solid rgba(255, 255, 255, 0);
          margin: 0 0 0.25rem 0.13rem;
          img {
            float: left;
            @include rect(1.11rem, 1.08rem);
            line-height: 0.20rem;
            border-radius: 0.08rem;
            background-color: rgba(213, 213, 213, 1);
            border: 1px solid rgba(255, 255, 255, 0);
            margin: 0.2rem 0.1rem 0.2rem 0.16rem;
          }
          h3 {
            float: left;
            color: rgb(82, 81, 81);
            font-size: 0.14rem;
            text-align: left;
            font-family: PingFangSC-regular;
            line-height: 0.22rem;
            margin-top: 0.2rem;
          }
          p {
            width: 2rem;
            height: auto;
            float: left;
            line-height: 0.2rem;
          }
          span {
            display: block;
            float: left;
            margin-top: 0.2rem;
          }
        }
      }
    }
  }

</style>
